<!--
 * @Author: leno.1 len0803@163.com
 * @Date: 2024-05-29 14:48:12
 * @LastEditors: leno.1 len0803@163.com
 * @LastEditTime: 2024-05-29 18:04:44
 * @FilePath: \booth-app\pages\home\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<view class="home">
		<!-- 头部定位 -->
		<view class="header-loca">
			<view :style="{ 'height': statusBarHeight + 'px' }"></view>
			<view class="micro-head" style="" :style="{ 'height': microButtonHeight + 'px' }">
				<view class="back-btn">
					<view class="load-text" @click="onClickLoad">
						<u-icon size="32rpx" name="/static/images/home/position.png"></u-icon>
						<text>广州市</text>
					</view>
					<u-icon @click="onRefresh" size="28rpx" name="/static/images/home/refresh.png"></u-icon>
				</view>
			</view>
		</view>
		<!-- 搜索 -->
		<view class="search">
			<u-search bgColor='#FFFFFF' color="#999999" placeholder='请输入关键词查找' placeholderColor="#999999"
				searchIconColor='#333333' searchIconSize="48rpx" searchIcon="/static/images/home/search.png" :actionStyle="{
				display: 'flex',
				alignItems: 'center',
				justifyContent: 'center',
				width: '140rpx',
				height: '60rpx',
				background: '#D7000F',
				borderRadius: '52rpx 52rpx 52rpx 52rpx',
				fontWeight: 500,
				fontSize: '28rpx',
				color: '#FFFFFF',
				marginRight: '8rpx'
			}" @search="onSearchClick"></u-search>
		</view>

		<!-- 中心图片 -->
		<view class="core-ad">
			<u-image width="702rpx" height="320rpx" src="/static/images/home/group.png"></u-image>
		</view>

		<!-- 用户招聘信息 -->
		<view class="user-info">
			<u-image width="74rpx" height="74rpx" shape="circle" src="https://cdn.uviewui.com/uview/album/1.jpg"></u-image>
			<view class="info">
				<text>天涯海角 评价<text class="info-total">125</text></text>
				<view class="info-content">

					<u--text :text="isPhone(infoPhone)"></u--text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			safeAreaInsets: 0,
			microButtonHeight: 0,
			statusBarHeight: 0,
			searchDate: '',
			searchStyle: {
				height: '76',
				bgColor: '#FFFFFF',
				color: "#999999",
				value: '请输入关键词查找',
				searchIconColor: '#333333',
				searchIconSize: "24",
			},
			infoPhone: '放明天，伦教市场后门市场主通道人流多消费高4.×2米三面开 发财价298放明天，伦教市场后门市场主通道人流多消费高4.×2米三面开 发财价298   联系电话：13466668899'
		}
	},
	onLoad() {
		this.getTopIconDistance()


	},
	mounted() {
		const text = "联系电话：13812345678";
		var phoneNumbers = text.match(/\b1[3-9]\d{9}\b/g);
		if (phoneNumbers) {
			console.log("文本中含有可能的手机号码。");
			// 可以在这里调用拨打电话的API，例如：
			// uni.makePhoneCall({ phoneNumber: text.match(regex)[0] });
		} else {
			console.log("文本中不含手机号码。");
		}
	},
	methods: {
		// 计算手机头部距离
		getTopIconDistance() {
			uni.getSystemInfo({
				success: (res) => {
					// 获取手机顶部状态栏的高度
					const statusBarHeight = res.statusBarHeight || 0;

					// 获取导航栏的高度（手机状态栏高度 + 胶囊高度 + 胶囊的上下间距）
					const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
					const navBarHeight = menuButtonInfo.height + (menuButtonInfo.top - statusBarHeight) *
						2;

					// 计算顶部图标距离
					const topIconDistance = statusBarHeight + navBarHeight;

					//小程序胶囊占高度
					const microButtonHeight = menuButtonInfo.height + ((menuButtonInfo.top -
						statusBarHeight) * 2)

					// 打印顶部图标距离
					uni.showToast({
						title: '顶部距离:' + topIconDistance
					});

					this.safeAreaInsets = topIconDistance;
					this.microButtonHeight = microButtonHeight;
					this.statusBarHeight = statusBarHeight;
				},
				fail: (err) => {
					console.error('获取系统信息失败:', err);
				},
			});
		},
		// 定位
		onClickLoad() {
			console.log('定位');
		},
		// 刷新
		onRefresh() {
			console.log('刷新');
		},
		// 搜索
		onSearchClick() {
			uni.showToast({
				title: '搜索了'
			});
		},
		// 判断是否有手机号码
		isPhone(text) {
			if (text.match(/\b1[3-9]\d{9}\b/g)) {
				console.log(text, '有');
			} else {
				console.log(text, '无');
			}
		}
	}

}
</script>

<style lang="scss" scoped>
.home {
	.header-loca {
		.micro-head {
			display: flex;
			align-items: center;

			.back-btn {
				display: flex;
				align-items: center;

				.load-text {
					display: flex;
					align-items: center;
					margin-right: 12rpx;

					>text {
						font-weight: 500;
						font-size: 28rpx;
						color: #333333;
						margin-left: 4rpx;
					}
				}

			}
		}


	}

	.search {
		display: flex;
		align-items: center;
		width: 702rpx;
		height: 76rpx;
		background: #FFFFFF;
		border-radius: 38rpx 38rpx 38rpx 38rpx;

		>image {
			width: 48rpx;
			height: 48rpx;
			margin: 0 30rpx 0 20rpx;
		}
	}

	.core-ad {
		overflow: hidden;
		margin: 24rpx 0 20rpx;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.user-info {
		display: flex;

		.info,
		&-total {
			color: #999999;
			font-size: 24rpx;
		}

		.info {
			margin-left: 20rpx;

			&-total {
				color: #D7000F;
			}

			&-content {
				width: 516rpx;
				// height: 432rpx;
				background: #FFFFFF;
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-top: 20rpx;
				padding: 20rpx 24rpx;
				font-size: 32rpx;
				color: #333;
			}
		}
	}
}
</style>